import React, { Component } from 'react';

class FormView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            textValue: '',
            textAreaValue: '',
            selectValue: 'coconut'
        };
        this.onTextHandle = this.onTextHandle.bind(this);
        this.onTextAreaChange = this.onTextAreaChange.bind(this);
        this.onSelectChange = this.onSelectChange.bind(this);
        this.onSubmitHandle = this.onSubmitHandle.bind(this);
    }

    onTextHandle(event) {
        this.setState({textValue: event.target.value});
    }

    onTextAreaChange(event) {
        this.setState({textAreaValue: event.target.value});
    }

    onSelectChange(event) {
        this.setState({selectValue: event.target.value});
    }

    onSubmitHandle(event) {
        console.log('onSubmitHandle:', this.state.textValue);
        console.log('onSubmitHandle:', this.state.textAreaValue);
        console.log('onSubmitHandle:', this.state.selectValue);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.onSubmitHandle}>
                <div>
                    <label>
                        text: {this.state.textValue}
                        <input type="text" name="hello" value={this.state.textValue} onChange={this.onTextHandle}/>
                    </label>
                </div>
                <div>
                    <label>
                        textarea:
                        <textarea value={this.state.textAreaValue} onChange={this.onTextAreaChange} />
                    </label>
                </div>
                <div>
                    <label>
                        Pick your favorite La Croix flavor:
                        <select value={this.state.selectValue} onChange={this.onSelectChange}>
                            <option value={'grapefruit'}>Grapefruit</option>
                            <option value={'lime'}>Lime</option>
                            <option value={'coconut'}>Coconut</option>
                            <option value={'mango'}>Mango</option>
                        </select>
                    </label>
                </div>
                <input type="submit" value="提交" />
            </form>
        );
    }
}

export default FormView;